<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<custom-navbar @titleClick="scrollToTop">
			<template #left>
				<image class="menu-icon" src="https://img.icons8.com/ios/50/menu--v1.png" mode="aspectFit" @tap="openDrawer"></image>
				<image class="grid-icon" src="https://img.icons8.com/ios/50/apps-tab.png" mode="aspectFit"></image>
			</template>
		</custom-navbar>

		<!-- 侧边抽屉 -->
		<view class="drawer-mask" v-if="showDrawer" @tap="closeDrawer" @touchmove.prevent></view>
		<view class="drawer" :class="{show: showDrawer}">
			<view class="drawer-header" :style="{paddingTop: statusBarHeight + 30 + 'px'}">
				<!-- <text class="drawer-title">懒人</text> -->
				<image class="drawer-icon2" :src="appname" mode="aspectFit"></image>

				<image class="drawer-icon" :src="logo" mode="aspectFit"></image>
				<!-- <text class="drawer-title">资源</text> -->

			</view>
			<scroll-view class="drawer-menu" scroll-y="true">
				<view class="menu-item" v-for="(menu, index) in menuList" :key="index" @tap="navigateToMenu(menu)">
					<image class="menu-icon" :src="menu.icon" mode="aspectFit"></image>
					<text class="menu-text">{{menu.name}}</text>
				</view>
			</scroll-view>
			<view class="drawer-footer">
				<view class="footer-btn">
					<text class="btn-text">呼叫客服</text>
				</view>
				<view class="website-info">
					<text class="website-text">懒人资源.com</text>
				</view>
			</view>
		</view>

		<!-- 主内容区域 -->
		<scroll-view 
			class="main-content" 
			:class="{'no-scroll': showDrawer}" 
			:style="{paddingTop: navbarTotalHeight + 'px'}" 
			scroll-y="true" 
			:scroll-into-view="scrollIntoView" 
			:scroll-with-animation="true"
			:scroll-top="scrollTop"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onPullDownRefresh"
		>
		<!-- <view style="height:300rpx ;background-color:#4fa6ff;z-index: -1;">
			
		</view> -->

		<!-- 分类标签 -->
		<view class="category-tabs">
			<view class="tab-item" :class="{active: activeTab === index}" v-for="(tab, index) in tabs" :key="index" @tap="switchTab(index)">
				<text class="tab-text">{{tab}}</text>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<image class="search-input-icon" src="https://img.icons8.com/ios/50/search--v1.png" mode="aspectFit"></image>
				<input class="search-input" placeholder="输入你想看的影片名" placeholder-style="color: #999;"/>
			</view>
		</view>

		<!-- 快捷入口 -->
		<view class="quick-entry">
			<text class="quick-item" v-for="(item, index) in quickItems" :key="index" @tap="quickAction(item)">{{item}}</text>
		</view>

		<!-- 广告横幅预留 -->
		<view class="ad-banner">
			<view class="ad-content">
				<image class="ad-icon" src="https://img.icons8.com/emoji/48/laptop-emoji.png" mode="aspectFit"></image>
				<text class="ad-text">直播、小视频、漫画都能看的追剧APP (安卓+iOS)</text>
			</view>
		</view>

		<view class="content-container">
			<!-- 功能推荐 -->
		<view class="recommendations">
			<view class="recommend-header">
				<image class="heart-icon" src="https://img.icons8.com/emoji/48/red-heart.png" mode="aspectFit"></image>
				<text class="recommend-title">合作推荐</text>
				<text class="more-text">☆大流量卡 ☆美团外卖 ☆高清打车</text>
			</view>
		</view>

		<!-- 内容列表 -->
			<view class="content-grid">
				<view class="content-item" v-for="(item, index) in contentList" :key="index" @tap="openContent(item)">
					<view class="item-icon">
						<image :src="item.icon" mode="aspectFit"></image>
					</view>
					<view class="item-info">
						<text class="item-title">{{item.title}}</text>
						<text class="item-desc">{{item.desc}}</text>
					</view>
					<view class="item-tag" v-if="item.tag">
						<text class="tag-text">{{item.tag}}</text>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 两级分类内容区域 -->
		<view class="content-container2">
			<view class="category-section" :id="'category-' + categoryIndex" v-for="(category, categoryIndex) in menuList" :key="categoryIndex">
				<!-- 一级分类标题 -->
				<view class="category-header">
					<view class="category-title-row">
						<image class="category-icon" :src="category.icon" mode="aspectFit"></image>
						<text class="category-title">{{ category.name }}</text>
						<!-- 二级分类切换标签 -->
					<view class="sub-category-tabs" v-if="category.children && category.children.length > 0">
						<view 
							class="sub-tab-item" 
							:class="{active: activeSubTab[categoryIndex] === subIndex}" 
							v-for="(subCategory, subIndex) in category.children" 
							:key="subIndex"
							@tap="switchSubTab(categoryIndex, subIndex)"
						>
							<text class="sub-tab-text">{{ subCategory.name }}</text>
						</view>
					</view>
					</view>
					
					
				</view>

				<view class="sub-content-grid" v-if="getCurrentSubCategory(category, categoryIndex)">
					<view 
						class="content-item" 
						v-for="(item, itemIndex) in getCurrentSubCategory(category, categoryIndex).contentList" 
						:key="itemIndex" 
						@tap="openContent(item)"
					>
						<view class="item-icon">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
						<view class="item-info">
							<text class="item-title">{{item.title}}</text>
							<text class="item-desc">{{item.desc}}</text>
						</view>
						<view class="item-tag" v-if="item.tag">
							<text class="tag-text">{{item.tag}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
			
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text class="load-text">{{loadingText}}</text>
		</view>
		</scroll-view>
		<view v-if="!isLoggedIn" class="message-container">
			<view class="message-login"> 
		<text class="message-text">登录懒人资源，体验更多在线资源服务</text>
		<button class="login-button" @tap="goToLogin">立即登录</button>
		</view>
			</view>
		

		<!-- 自定义底部导航栏 -->
		<custom-tabbar :current="0" @switch="onTabSwitch"></custom-tabbar>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue';
import logo from '@/static/logo2.png';
import appname from '@/static/appname.png'

export default {
	components: {
		CustomNavbar,
		CustomTabbar
	},
	data() {
		return {
			logo,
			appname,
			activeTab: 0,
			activeSubTab: {}, // 存储每个一级分类当前选中的二级分类索引
			showDrawer: false,
			refreshing: false, // 控制下拉刷新状态
			hasMore: true,
			loadingText: '上拉加载更多',
			navbarTotalHeight: 132,
			statusBarHeight: 44,
			scrollIntoView: '', // 控制滚动定位的元素ID
			scrollTop: 0, // 控制滚动位置,
			isLoggedIn: false, // 将在mounted中检查实际登录状态
			userInfo: null, // 用户信息
			tabs: ['影视搜索', '音乐搜索','资源搜索'],
			quickItems: ['欧美星球', '免费影视', '555电影', '皮皮虾影视'],
			contentList: [
				{
					icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
					title: '全网免费小说',
					desc: '热门小说、免费阅读',
					tag: '',
					url:"https://zjapp.shop/"
				},
				{
					icon: 'https://img.icons8.com/fluency/48/hospital-3.png',
					title: '老牌方影院',
					desc: '经典老牌影院',
					tag: '1',
					url:"https://zjapp.shop/"
				},
				{
					icon: 'https://img.icons8.com/fluency/48/tv-show.png',
					title: '高清免费追剧神器',
					desc: '最新热播剧集',
					tag: '',
					url:"https://zjapp.shop/"
				},
				{
					icon: 'https://img.icons8.com/fluency/48/movie-theater.png',
					title: '永乐蓝光影院',
					desc: '蓝光品质观影',
					tag: '',
					url:"https://zjapp.shop/"
				},
				{
					icon: 'https://img.icons8.com/fluency/48/video-camera.png',
					title: '4K影视网站',
					desc: '超高清画质',
					tag: '',
					url:"https://zjapp.shop/"
				},
				{
					icon: 'https://img.icons8.com/fluency/48/popcorn.png',
					title: '5点电影',
					desc: '每日更新最新影片',
					tag: '',
					url:"https://zjapp.shop/"
				}
			],
					menuList: [
				{ 
					name: '影视', 
					icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
					desc: '影视资源、番剧、App下载',
					children: [
						{
							name:'在线看',
							icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
									title: '可可影视',
									desc: 'iOS、安卓双端全多平台',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
									title: '注视影视',
									desc: '海外影视资源',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
									title: 'NC影视',
									desc: '主打海外多语种资源',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/movie-projector.png',
									title: '星视影视',
									desc: '免费海外合家影视资源',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'字幕',
							icon: 'https://img.icons8.com/fluency/48/subtitles.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/subtitles.png',
									title: '修罗影视',
									desc: '资源领先、内容丰富',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/subtitles.png',
									title: '在线之家',
									desc: '海外影视为主的在线网站',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'APP',
							icon: 'https://img.icons8.com/fluency/48/smartphone.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/smartphone.png',
									title: '低端影视',
									desc: '以海外影视资源为主导',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/smartphone.png',
									title: 'LIBVIO',
									desc: '以海外影视资源为主的',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '二次元', 
					icon: 'https://img.icons8.com/fluency/48/anime.png',
					desc: '二次元资源、番剧、App下载',
					children: [
						{
							name:'在线看',
							icon: 'https://img.icons8.com/fluency/48/anime.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/anime.png',
									title: '樱花动漫',
									desc: '免费在线观看',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/anime.png',
									title: '风车动漫',
									desc: '高清番剧',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/anime.png',
									title: '动漫之家',
									desc: '经典动漫资源',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'APP',
							icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
									title: '二次元APP',
									desc: '手机动漫APP',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
									title: '番剧追踪',
									desc: '番剧更新提醒',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '音乐', 
					icon: 'https://img.icons8.com/fluency/48/music.png',
					desc: '音乐资源、App下载',
					children: [
						{
							name:'在线听',
							icon: 'https://img.icons8.com/fluency/48/music.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/music.png',
									title: '网易云音乐',
									desc: '海量音乐库',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/music.png',
									title: 'QQ音乐',
									desc: '高品质音乐',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/music.png',
									title: '酷狗音乐',
									desc: '免费听歌',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'APP',
							icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
									title: '音乐播放器',
									desc: '本地音乐播放',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
									title: '无损音乐',
									desc: '高品质音乐下载',
									tag: 'VIP',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '阅读', 
					icon: 'https://img.icons8.com/fluency/48/book.png',
					desc: '小说、漫画、app',
					children: [
						{
							name:'小说',
							icon: 'https://img.icons8.com/fluency/48/book.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/book.png',
									title: '起点中文网',
									desc: '正版小说阅读',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/book.png',
									title: '免费小说',
									desc: '海量免费小说',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/book.png',
									title: '笔趣阁',
									desc: '免费小说在线阅读',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'漫画',
							icon: 'https://img.icons8.com/fluency/48/comic-book.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/comic-book.png',
									title: '腾讯动漫',
									desc: '正版漫画',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/comic-book.png',
									title: '漫画人',
									desc: '免费漫画阅读',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'APP',
							icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
									title: '阅读APP',
									desc: '手机阅读应用',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '游戏', 
					icon: 'https://img.icons8.com/fluency/48/controller.png',
					desc: '游戏资源、App下载',
					children: [
						{
							name:'手游',
							icon: 'https://img.icons8.com/fluency/48/controller.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/controller.png',
									title: '王者荣耀',
									desc: 'MOBA手游',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/controller.png',
									title: '和平精英',
									desc: '射击竞技游戏',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/controller.png',
									title: '原神',
									desc: '开放世界冒险游戏',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'PC游戏',
							icon: 'https://img.icons8.com/fluency/48/gaming.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/gaming.png',
									title: 'Steam',
									desc: '游戏平台',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/gaming.png',
									title: '游戏下载',
									desc: '免费游戏资源',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '娱乐', 
					icon: 'https://img.icons8.com/fluency/48/party-baloons.png',
					desc: '游戏、直播、视频、App下载',
					children: [
						{
							name:'直播',
							icon: 'https://img.icons8.com/fluency/48/video-call.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/video-call.png',
									title: '斗鱼直播',
									desc: '游戏直播平台',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/video-call.png',
									title: '虎牙直播',
									desc: '娱乐直播',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/video-call.png',
									title: 'B站直播',
									desc: '哔哩哔哩直播',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'短视频',
							icon: 'https://img.icons8.com/fluency/48/tiktok.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/tiktok.png',
									title: '抖音',
									desc: '短视频平台',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/tiktok.png',
									title: '快手',
									desc: '短视频社区',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '工具箱', 
					icon: 'https://img.icons8.com/fluency/48/toolbox.png',
					desc: '工具、小助手、App下载',
					children: [
						{
							name:'实用工具',
							icon: 'https://img.icons8.com/fluency/48/toolbox.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/toolbox.png',
									title: '文档转换',
									desc: 'PDF、Word格式转换',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/toolbox.png',
									title: '图片处理',
									desc: '在线图片编辑',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/toolbox.png',
									title: '二维码生成',
									desc: '免费二维码制作',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'APP',
							icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/mobile-phone.png',
									title: '工具箱APP',
									desc: '多功能工具集合',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{
					name: 'Ai工具',
					icon: 'https://img.icons8.com/fluency/48/ai.png',
					desc: '智能',
					children: [
						{
							name:'AI工具',
							icon: 'https://img.icons8.com/fluency/48/ai.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/ai.png',
									title: 'ChatGPT',
									desc: 'AI聊天助手',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/ai.png',
									title: 'Midjourney',
									desc: 'AI绘画工具',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/ai.png',
									title: '文心一言',
									desc: '百度AI助手',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'AI应用',
							icon: 'https://img.icons8.com/fluency/48/artificial-intelligence.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/artificial-intelligence.png',
									title: 'AI写作',
									desc: '智能写作助手',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/artificial-intelligence.png',
									title: 'AI翻译',
									desc: '多语言翻译',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{
					name: '扣子工作流',
					icon: 'https://img.icons8.com/fluency/48/ai.png',
					desc: '智能',
					children: [
						{
							name:'AI工具',
							icon: 'https://img.icons8.com/fluency/48/ai.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/ai.png',
									title: 'ChatGPT',
									desc: 'AI聊天助手',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/ai.png',
									title: 'Midjourney',
									desc: 'AI绘画工具',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/ai.png',
									title: '文心一言',
									desc: '百度AI助手',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'AI应用',
							icon: 'https://img.icons8.com/fluency/48/artificial-intelligence.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/artificial-intelligence.png',
									title: 'AI写作',
									desc: '智能写作助手',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/artificial-intelligence.png',
									title: 'AI翻译',
									desc: '多语言翻译',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '宝藏导航站', 
					icon: 'https://img.icons8.com/fluency/48/navigation.png',
					desc: '宝藏导航网址',
					children: [
						{
							name:'导航站',
							icon: 'https://img.icons8.com/fluency/48/navigation.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/navigation.png',
									title: '宝藏导航',
									desc: '精选网址导航',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/navigation.png',
									title: '懒人导航',
									desc: '简洁实用导航',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/navigation.png',
									title: '发现导航',
									desc: '发现有趣网站',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'资源站',
							icon: 'https://img.icons8.com/fluency/48/globe.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/globe.png',
									title: '资源搜索',
									desc: '各类资源聚合',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '爱编程', 
					icon: 'https://img.icons8.com/fluency/48/programming.png',
					desc: '码农的网址',
					children: [
						{
							name:'学习',
							icon: 'https://img.icons8.com/fluency/48/programming.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/programming.png',
									title: 'GitHub',
									desc: '代码托管平台',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/programming.png',
									title: 'Stack Overflow',
									desc: '编程问答社区',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/programming.png',
									title: 'LeetCode',
									desc: '算法练习平台',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'工具',
							icon: 'https://img.icons8.com/fluency/48/code.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/code.png',
									title: 'VS Code',
									desc: '代码编辑器',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/code.png',
									title: '在线IDE',
									desc: '在线编程环境',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				},
				{ 
					name: '省钱助手', 
					icon: 'https://img.icons8.com/fluency/48/money-bag.png',
					desc: '省钱、工具、App下载',
					children: [
						{
							name:'优惠券',
							icon: 'https://img.icons8.com/fluency/48/money-bag.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/money-bag.png',
									title: '淘宝优惠券',
									desc: '购物优惠券领取',
									tag: 'HOT',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/money-bag.png',
									title: '京东优惠券',
									desc: '京东商城优惠',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/money-bag.png',
									title: '拼多多优惠',
									desc: '拼团优惠信息',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						},
						{
							name:'返利',
							icon: 'https://img.icons8.com/fluency/48/cash-in-hand.png',
							contentList:[
								{
									icon: 'https://img.icons8.com/fluency/48/cash-in-hand.png',
									title: '返利网',
									desc: '购物返利平台',
									tag: '',
									url:"https://zjapp.shop/"
								},
								{
									icon: 'https://img.icons8.com/fluency/48/cash-in-hand.png',
									title: '省钱快报',
									desc: '优惠信息聚合',
									tag: '',
									url:"https://zjapp.shop/"
								}
							]
						}
					]
				}
			]
		}
	},
				
	onLoad() {
		
	},
		mounted() {
			// 计算导航栏总高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 44;
			this.navbarTotalHeight = this.statusBarHeight + 44;
			
			// 初始化每个一级分类的默认二级分类选中状态
			this.initializeSubTabs();
			
			// 初始化加载数据
			this.loadHomeData();
			// 检查用户登录状态
		this.checkLoginStatus();
		},
		onShow() {
		// 页面显示时重新检查登录状态，以防用户在其他页面登录后返回
		console.log('页面显示，重新检查登录状态');
		this.checkLoginStatus();
	},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				this.refreshing = true;
				setTimeout(() => {
					this.loadHomeData();
					this.refreshing = false;
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1000
					});
				}, 1500);
			},
			
			// 加载首页数据
			loadHomeData() {
				// 模拟更新热门内容和快速入口
				const newQuickItems = ['最新热门', '精品推荐', '今日热门', '热门搜索'];
				this.quickItems = newQuickItems;
				
				// 更新热门内容列表
				const newContentList = [
					{
						icon: 'https://img.icons8.com/fluency/48/new-product.png',
						title: '最新热门影视',
						desc: '最新上线热门影片',
						tag: 'NEW',
					url:"https://zjapp.shop/"
					},
					{
						icon: 'https://img.icons8.com/fluency/48/star.png',
						title: '精品推荐',
						desc: '精心挑选优质内容',
						tag: 'HOT',
					url:"https://zjapp.shop/"
					},
					...this.contentList.slice(2) // 保留原有的其他内容
				];
				this.contentList = newContentList;
			},
		// 初始化二级分类选中状态
		initializeSubTabs() {
			const subTabState = {};
			this.menuList.forEach((category, index) => {
				subTabState[index] = 0; // 默认选中第一个子分类
			});
			this.activeSubTab = subTabState;
		},
		
		// 切换二级分类
		switchSubTab(categoryIndex, subIndex) {
			this.$set(this.activeSubTab, categoryIndex, subIndex);
		},
		
		// 获取当前选中的子分类
		getCurrentSubCategory(category, categoryIndex) {
			if (!category.children || category.children.length === 0) {
				return null;
			}
			const currentSubIndex = this.activeSubTab[categoryIndex] || 0;
			return category.children[currentSubIndex];
		},
		
		switchTab(index) {
			this.activeTab = index;
		},
		
		quickAction(item) {
			uni.showToast({
				title: `点击了 ${item}`,
				icon: 'none'
			});
		},
		
	        openContent(item) {
            // uni.showToast({
            //     title: `打开 ${item.title}`,
            //     icon: 'none'
            // });
            
            // 检查是否是外部链接
            if (item.url && (item.url.startsWith('http://') || item.url.startsWith('https://'))) {
                // 小程序中处理外部链接的方案
                // #ifdef H5
                window.open(item.url, '_blank');
                // #endif
                
                // #ifdef APP-PLUS
                plus.runtime.openURL(item.url);
                // #endif
                
                // #ifdef MP
                // 小程序中的处理方式
                uni.showModal({
                    title: '提示',
                    content: `请在浏览器中打开：${item.url}`,
                    confirmText: '复制链接',
                    cancelText: '取消',
                    success: (res) => {
                        if (res.confirm) {
                            // 复制链接到剪贴板
                            uni.setClipboardData({
                                data: item.url,
                                success: () => {
                                    uni.showToast({
                                        title: '链接已复制',
                                        icon: 'success'
                                    });
                                }
                            });
                        }
                    }
                });
                // #endif
            } else if (item.url) {
                // 应用内页面跳转
                uni.navigateTo({
                    url: item.url
                });
            }
        },
		
		openDrawer() {
			this.showDrawer = true;
			// 添加页面class来防止滚动
			// #ifdef H5
			document.body.classList.add('drawer-open');
			// #endif
		},
		
		closeDrawer() {
			this.showDrawer = false;
			// 移除页面class恢复滚动
			// #ifdef H5
			document.body.classList.remove('drawer-open');
			// #endif
		},
		
		navigateToMenu(menu) {
			// 找到菜单项在menuList中的索引
			const menuIndex = this.menuList.findIndex(item => item.name === menu.name);
			
			if (menuIndex !== -1) {
				// 设置滚动定位的目标元素
				this.scrollIntoView = 'category-' + menuIndex;
				
				// 略微延迟清除scrollIntoView，确保下次滚动生效
				setTimeout(() => {
					this.scrollIntoView = '';
				}, 500);
				
				// 显示成功提示
				// uni.showToast({
				// 	title: `已定位到 ${menu.name}`,
				// 	icon: 'none',
				// 	duration: 1500
				// });
			} else {
				// 找不到对应分类时的默认提示
				uni.showToast({
					title: `进入 ${menu.name}`,
					icon: 'none'
				});
			}
			
			// 关闭抽屉
			this.closeDrawer();
		},
		
		loadMore() {
			if (!this.hasMore) return;
			
			this.loadingText = '加载中...';
			setTimeout(() => {
				this.loadingText = '上拉加载更多';
			}, 1000);
		},
		
		onTabSwitch(event) {
			console.log('Tab切换:', event);
		},
		// 滚动到顶部
        scrollToTop() {
			if(this.showDrawer==true){
				return
			}else{
				// 方法1：使用scroll-top属性
            this.scrollTop = this.scrollTop === 0 ? 1 : 0;
            
            // 添加触觉反馈
            uni.vibrateShort({
                type: 'light'
            });
            
            // 显示提示
            // uni.showToast({
            //     title: '已回到顶部',
            //     icon: 'none',
            //     duration: 1000
            // });
			}
            
        },
		// 跳转到登录页面
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
			// 检查登录状态
		checkLoginStatus() {
			try {
				const token = uni.getStorageSync('token');
				const userInfo = uni.getStorageSync('userInfo');
				
				console.log('检查登录状态 - token:', token);
				console.log('检查登录状态 - userInfo:', userInfo);
				
				if (token && userInfo) {
					this.isLoggedIn = true;
					this.userInfo = userInfo;
					console.log('用户已登录，设置 isLoggedIn 为 true');
				} else {
					this.isLoggedIn = false;
					this.userInfo = null;
					console.log('用户未登录，设置 isLoggedIn 为 false');
				}
				
				// 强制更新视图
				this.$forceUpdate();
				
			} catch (e) {
				console.error('检查登录状态失败：', e);
				this.isLoggedIn = false;
				this.userInfo = null;
			}
		}
	},
	onUnload() {
		// 页面卸载时清理样式
		// #ifdef H5
		if (document.body.classList.contains('drawer-open')) {
			document.body.classList.remove('drawer-open');
		}
		// #endif
	}
}
</script>

<style>
page {
	background-color: #f5f5f5;
}

/* 抽屉打开时禁止页面滚动 */
page.drawer-open {
	overflow: hidden;
	height: 100vh;
}

/* H5端额外的防滚动样式 */
/* #ifdef H5 */
body.drawer-open {
	overflow: hidden;
	height: 100vh;
	position: fixed;
	width: 100%;
}
/* #endif */

.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	position: relative;
}

.main-content {
	position: relative;
	z-index: 1;
	height: calc(100vh - 132rpx - 140rpx); /* 预留导航栏和底部tabBar的空间 */
}

/* 当抽屉打开时禁止背景滚动 */
.main-content.no-scroll {
	overflow: hidden;
	height: 100vh;
}

/* 自定义导航栏内的图标样式 */
.menu-icon, .grid-icon, .search-icon, .history-icon {
	width: 40rpx;
	height: 40rpx;
	margin: 0 15rpx;
}

/* 分类标签 */
.category-tabs {
	display: flex;
	background: #ffffff;
	padding: 20rpx 30rpx 0;
}

.tab-item {
	margin-right: 40rpx;
	padding-bottom: 20rpx;
	position: relative;
}

.tab-item.active .tab-text {
	color: #ff6b35;
	font-weight: bold;
}

.tab-text {
	font-size: 32rpx;
	color: #666;
}
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: #ff6b35;
    border-radius: 2rpx;
}
/* 搜索框 */
.search-container {
	background: #ffffff;
	padding: 20rpx 30rpx 30rpx;
}

.search-box {
	display: flex;
	align-items: center;
	background: #f8f8f8;
	border-radius: 50rpx;
	padding: 0 30rpx;
	height: 80rpx;
}

.search-input-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 20rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.search-btn {
	width: 40rpx;
	height: 40rpx;
	padding: 10rpx;
	background: #ff6b35;
	border-radius: 50%;
}

/* 快捷入口 */
.quick-entry {
	display: flex;
	flex-wrap: wrap;
	background: #ffffff;
	padding: 0 30rpx 30rpx;
}

.quick-item {
	background: #f0f8ff;
	color: #1e90ff;
	padding: 12rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}

/* 广告横幅 */
.ad-banner {
	margin: 20rpx 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	overflow: hidden;
}

.ad-content {
	display: flex;
	align-items: center;
	padding: 30rpx;
}

.ad-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.ad-text {
	flex: 1;
	color: #ffffff;
	font-size: 28rpx;
	line-height: 1.4;
}
.content-container{
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
}
.content-container2 {
	padding-bottom: 140rpx;
}

.category-section {
	margin-bottom: 40rpx;
}

.category-header {
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx 30rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.category-title-row {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.category-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 15rpx;
}

.category-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.category-desc {
	flex: 1;
	font-size: 24rpx;
	color: #999;
}

/* 二级分类切换标签 */
.sub-category-tabs {
	display: flex;
	background: #f8f9fa;
	border-radius: 30rpx;
	padding: 8rpx;
	overflow-x: auto;
	white-space: nowrap;
}

.sub-tab-item {
	flex-shrink: 0;
	text-align: center;
	padding: 15rpx 20rpx;
	border-radius: 24rpx;
	transition: all 0.3s ease;
	margin-right: 8rpx;
	min-width: 80rpx;
}

.sub-tab-item.active {
	background: #667eea;
}

.sub-tab-text {
	font-size: 26rpx;
	color: #666;
	transition: all 0.3s ease;
}

.sub-tab-item.active .sub-tab-text {
	color: #ffffff;
	font-weight: bold;
}

/* 子内容网格 */
.sub-content-grid {
	padding: 0 30rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10rpx;
	margin-top: 20rpx;
}

/* 功能推荐 */
.recommendations {
	margin: 20rpx 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.recommend-header {
	display: flex;
	align-items: center;
}

.heart-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 15rpx;
}

.recommend-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.more-text {
	flex: 1;
	font-size: 24rpx;
	color: #ff6b35;
}

/* 内容列表 */
.content-list {
	height: calc(100vh - 500rpx);
	/* 为底部tabBar预留空间 */
	/* padding-bottom: 140rpx;  */
}

.content-grid {
	padding: 0 30rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10rpx;
}

.content-item {
	display: flex;
	align-items: center;
	background: #ffffff;
	margin-bottom: 20rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	position: relative;
	border: 1px solid #f0f8ff;
}

.item-icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 30rpx;
}

.item-icon image {
	width: 100%;
	height: 100%;
}

.item-info {
	flex: 1;
}

.item-title {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.item-desc {
	font-size: 18rpx;
	color: #999;
	display: block;
}

.item-tag {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background: #ff4757;
	border-radius: 50%;
	width: 30rpx;
	height: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tag-text {
	color: #ffffff;
	font-size: 20rpx;
}

/* 底部广告 */
.bottom-ad {
	margin: 40rpx 30rpx;
}

.ad-placeholder {
	background: #f8f8f8;
	border: 2rpx dashed #ddd;
	border-radius: 20rpx;
	padding: 60rpx;
	text-align: center;
}

.ad-label {
	color: #999;
	font-size: 28rpx;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 40rpx;
}

.load-text {
	color: #999;
	font-size: 28rpx;
}

/* 侧边抽屉 */
.drawer-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	z-index: 9998;
}

.drawer {
	position: fixed;
	top: 0;
	left: -400rpx;
	width: 400rpx;
	height: 100vh;
	background: #ffffff;
	z-index: 9999;
	transition: left 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 2rpx 0 8rpx rgba(0,0,0,0.1);
}

.drawer.show {
	left: 0;
}

.drawer-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.drawer-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
}

.drawer-icon {
	width: 64rpx;
	height: 64rpx;
	margin: 0 15rpx;
}
.drawer-icon2 {
	width: 128rpx;
	height: 64rpx;
	margin: 0 15rpx;
}

.drawer-menu {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 60rpx;
	flex-shrink: 0;
}

.menu-item:active {
	background: #f5f5f5;
}

.menu-icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 30rpx;
}

.menu-text {
	font-size: 32rpx;
	color: #333;
}

.drawer-footer {
	padding: 40rpx 30rpx 60rpx;
}

.footer-btn {
	background: #2ed573;
	border-radius: 50rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
	text-align: center;
}

.btn-text {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
}

.website-info {
	text-align: center;
}

.website-text {
	background: #3742fa;
	color: #ffffff;
	padding: 15rpx 30rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
}
.message-container{
	width: 100%;
position: fixed;
	bottom: 240rpx;
	z-index: 1;
	font-size: 24rpx;
	color: #fff;
	
}
.message-login{
	width: 80%;
	margin: auto;
	background: #a2b0b1;
	opacity: 0.8;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 0rpx 10rpx 30rpx;
}
.login-button{
font-size: 24rpx;
border-radius: 30rpx;
}
</style>
